<template>
  <div class="con">
    <div class="title">中铁商户中心</div>
    <div class="step">
      <div class="step-item" :class="step >= 0 ? 'step-item1' : ''">
        <i class="el-icon-circle-check"></i>
        <span>号码验证</span>
      </div>
      <div class="step-line" :class="step >= 1 ? 'step-line1' : ''"></div>
      <div class="step-item" :class="step >= 1 ? 'step-item1' : ''">
        <i class="el-icon-circle-check"></i>
        <span>店铺信息</span>
      </div>
      <div class="step-line" :class="step >= 2 ? 'step-line1' : ''"></div>
      <div class="step-item" :class="step >= 2 ? 'step-item1' : ''">
        <i class="el-icon-circle-check"></i>
        <span>提交资质</span>
      </div>
    </div>
    <div v-show="step == 0">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="form1"
        class="form1"
      >
        <el-form-item label="手机号" :required="true">
          <el-input v-model="form1.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="验证码" :required="true">
          <el-col :span="20">
            <el-input
              v-model="form1.region"
              placeholder="请输入验证码"
            ></el-input>
          </el-col>
          <el-col :span="4" class="a">
            <div @click="getCode" v-show="show" class="yan">获取验证码</div>
            <div v-show="!show" class="yan">{{ count }} s</div>
          </el-col>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox v-model="form1.type">
            我已阅读并同意
          </el-checkbox>
          <span class="yonghu" @click.stop="xieyi(0)">《中铁用户协议》</span>
        </el-form-item>
      </el-form>
      <div class="zhuche" @click="zhuche">去注册</div>
    </div>
    <div v-show="step == 1">
      <el-form
        :label-position="labelPosition"
        label-width="100px"
        :model="form2"
        class="form1"
      >
        <el-form-item label="商家名称" :required="true">
          <el-input
            v-model="form2.name"
            placeholder="请输入商家名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择城市" :required="true">
          <el-cascader
            placeholder="请选择地区"
            :options="options"
            v-model="form2.provinceCityArea"
            @change="changeCity"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" :required="true">
          <el-input
            v-model="form2.xing"
            placeholder="请输入详细地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="zhuche" @click="xiayibu">下一步</div>
    </div>
    <div v-show="step == 2">
      <el-form
        :label-position="labelPosition"
        label-width="140px"
        :model="form3"
        class="form1 form3"
      >
        <el-form-item label="负责人身份证" :required="true">
          <el-col :span="10">
            <div class="name">上传正面身份证</div>
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :accept="'image/*'"
            >
              <img v-if="form3.imageUrl" :src="form3.imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
          <el-col :span="10">
            <div class="name">上传反面身份证</div>
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload"
              :accept="'image/*'"
            >
              <img
                v-if="form3.imageUrl1"
                :src="form3.imageUrl1"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
          <el-col :span="24" class="yaoqiu">
            <img src="@/assets/img/login/tishi.png" />
            <span>要求：证件文字清晰，建议使用原图；</span>
          </el-col>
        </el-form-item>
        <el-form-item label="负责人姓名" :required="true">
          <el-input
            v-model="form3.name"
            placeholder="请输入负责人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号" :required="true">
          <el-input
            v-model="form3.cid"
            maxlength="18"
            placeholder="请输入负责人身份证号"
          ></el-input>
        </el-form-item>
        <el-form-item label="商家资质" :required="true">
          <el-col :span="10">
            <div class="name">上传营业执照</div>
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload"
              :accept="'image/*'"
            >
              <img
                v-if="form3.imageUrl2"
                :src="form3.imageUrl2"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
          <el-col :span="24" class="yaoqiu">
            <img src="@/assets/img/login/tishi.png" />
            <span>要求：证件文字清晰，建议使用原图；</span>
          </el-col>
        </el-form-item>
        <el-form-item label="行业类别" :required="true">
          <el-select
            v-model="form3.leibie"
            filterable
            placeholder="请选择行业类别"
          >
            <el-option
              v-for="item in options2"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行业属性" :required="true">
          <el-select
            v-model="form3.shuxing"
            filterable
            placeholder="请选择行业类别"
          >
            <el-option
              v-for="item in options3"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="注册号" :required="true">
          <el-input
            v-model="form3.zhuche"
            placeholder="请输入营业执照上的注册号或统一社会信用代码"
          ></el-input>
        </el-form-item>
        <el-form-item label="执照名称" :required="true">
          <el-input
            v-model="form3.zname"
            placeholder="营业执照“名称”一栏的内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="法人姓名" :required="true">
          <el-input
            v-model="form3.fname"
            placeholder="营业执照上法人或者经营姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="法人手机号" :required="true">
          <el-input
            v-model="form3.fipo"
            maxlength="11"
            placeholder="请输入法人身份证办理的手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="法人身份证" :required="true">
          <el-col :span="10">
            <div class="name">上传正面身份证</div>
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :on-success="handleAvatarSuccess3"
              :before-upload="beforeAvatarUpload"
              :accept="'image/*'"
            >
              <img
                v-if="form3.imageUrl3"
                :src="form3.imageUrl3"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
          <el-col :span="10">
            <div class="name">上传反面身份证</div>
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :on-success="handleAvatarSuccess4"
              :before-upload="beforeAvatarUpload"
              :accept="'image/*'"
            >
              <img
                v-if="form3.imageUrl4"
                :src="form3.imageUrl4"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
          <el-col :span="24" class="yaoqiu">
            <img src="@/assets/img/login/tishi.png" />
            <span>要求：证件文字清晰，建议使用原图；</span>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="zhuche" @click="shen">确认提交审核</div>
    </div>
    <el-dialog :title="name" :visible.sync="dialog">
      <div class="dialog" v-html="html"></div>
    </el-dialog>
  </div>
</template>

<script>
import arr from "@/assets/js/districts";
export default {
  name: "",
  data() {
    return {
      url: "",
      step: 0,
      labelPosition: "left",
      options: [], // 省市区
      selectedOptions: [],
      cityArr: [], // 城市列表
      areaArr: [], // 区县列表
      form1: {
        phone: "",
        region: "",
        type: false
      },
      form2: {
        name: "",
        xing: "",
        provinceCityArea: "",
        province: "河南省",
        city: "郑州市",
        area: "中原区"
      },
      form3: {
        imageUrl: "",
        imageUrl1: "",
        name: "",
        cid: "",
        imageUrl2: "",
        leibie: "",
        shuxing: "",
        zhuche: "",
        zname: "",
        fname: "",
        fipo: "",
        imageUrl3: "",
        imageUrl4: ""
      },
      options2: [],
      options3: [],
      show: true,
      count: "", //倒计时时间
      timer: null, //倒计时事件
      name: "",
      dialog: false,
      html: ""
    };
  },
  //注册组件
  components: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.initDistPicker();
    this.getShopType(0);
    this.getShopType1(1);
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.url = `${this.$baseUrl}/api/common/upload`;
  },
  //计算属性
  computed: {},
  //方法
  methods: {
    // 获取行业类别
    async getShopType(e) {
      let res = await this.$postRequest("/api/shop/getShopType", { status: e });
      console.log(res, e);
      if (res.code == 0) {
        this.options2 = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 获取行业属性
    async getShopType1(e) {
      let res = await this.$postRequest("/api/shop/getShopType", { status: e });
      if (res.code == 0) {
        this.options3 = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    //倒计时
    getCode() {
      if (!this.show) return;
      const TIME_COUNT = 60;
      if (!this.timer) {
        console.log(this.form1.phone);
        if (this.form1.phone == "") {
          this.$message.error("请输入手机号");
        } else if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.form1.phone)) {
          this.$message.error("手机号格式错误");
        } else {
          this.$postRequest("/api/member/getCode", {
            phone: this.form1.phone
          }).then(res => {});
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      }
    },
    handleAvatarSuccess(res, file) {
      console.log(res, file);
      this.form3.imageUrl = res.data;
    },
    handleAvatarSuccess1(res, file) {
      this.form3.imageUrl1 = res.data;
    },
    handleAvatarSuccess2(res, file) {
      this.form3.imageUrl2 = res.data;
    },
    handleAvatarSuccess3(res, file) {
      this.form3.imageUrl3 = res.data;
    },
    handleAvatarSuccess4(res, file) {
      this.form3.imageUrl4 = res.data;
    },
    beforeAvatarUpload(file) {
      // 判断图片是否大于2M
      const isLt2M = file.size / 1024 / 1024 < 2;
      // const fileType = file.name.substring(file.name.lastIndexOf('.')+1)
      // 判断图片的类型
      const isJpg =
        file.type == "image/jpeg" ||
        file.type == "image/jpg" ||
        file.type == "image/png" ||
        file.type == "image/gif";
      if (!isJpg) {
        this.$message.error("只能上传jpg, jpeg, png, gif格式的图片！");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
    },
    // 初始化选择器
    initDistPicker() {
      let distData = arr.arr;
      let options = []; // 省
      for (var provinceKy in distData["100000"]) {
        let optProvinceItem = {
          value: provinceKy,
          label: distData["100000"][provinceKy]
        };
        if (distData[provinceKy]) {
          // 市
          for (var cityKy in distData[provinceKy]) {
            optProvinceItem.children = optProvinceItem.children
              ? optProvinceItem.children
              : [];
            let optCityItem = {
              value: cityKy,
              label: distData[provinceKy][cityKy]
            };
            if (distData[cityKy]) {
              // 区
              for (var areaKy in distData[cityKy]) {
                optCityItem.children = optCityItem.children
                  ? optCityItem.children
                  : [];
                let optAreaItem = {
                  value: areaKy,
                  label: distData[cityKy][areaKy]
                };
                optCityItem.children.push(optAreaItem);
              }
            }
            optProvinceItem.children.push(optCityItem);
          }
        }
        options.push(optProvinceItem);
      }
      this.distData = distData;
      this.options = options;
    }, // 切换城市
    changeCity(value) {
      this.options.map((item, index) => {
        if (item.value == value[0]) {
          console.log(item);
          this.cityArr = item.children; //存储城市列表
          this.form2.province = item.label;
        }
      }); //获取市名
      this.cityArr.map((item, index) => {
        if (item.value == value[1]) {
          console.log(item);
          this.areaArr = item.children; //存储区县列表
          this.form2.city = item.label;
        }
      }); //获取区县名
      this.areaArr.map((item, index) => {
        if (item.value == value[2]) {
          console.log(item);
          this.form2.area = item.label;
        }
      });
    },

    zhuche() {
      if (this.form1.phone == "") {
        this.$message.error("请输入手机号");
      } else if (this.form1.region == "") {
        this.$message.error("请输入手机号手机验证码");
      } else if (!this.form1.type) {
        this.$message.error("请同意用户协议");
      } else {
        this.step = 1;
      }
    },
    xiayibu() {
      if (this.form2.name == "") {
        this.$message.error("请输入商家名称");
      } else if (this.form2.provinceCityArea == "") {
        this.$message.error("请选择城市");
      } else if (!this.form2.xing) {
        this.$message.error("请输入详细地址");
      } else {
        this.step = 2;
      }
    },
    async shen() {
      console.log(this.form3.fipo, this.form3.fipo.length != "11");
      if (this.form3.imageUrl == "") {
        this.$message.error("请上传负责人正面身份证");
      } else if (this.form3.imageUrl1 == "") {
        this.$message.error("请上传负责人反面身份证");
      } else if (this.form3.name == "") {
        this.$message.error("请输入负责人姓名");
      } else if (this.form3.cid.length != "18") {
        this.$message.error("负责人身份证号码错误");
      } else if (this.form3.imageUrl2 == "") {
        this.$message.error("请上传营业资质");
      } else if (this.form3.leibie == "") {
        this.$message.error("请选择行业类别");
      } else if (this.form3.shuxing == "") {
        this.$message.error("请选择行业属性");
      } else if (this.form3.zhuche == "") {
        this.$message.error("请输入注册号");
      } else if (this.form3.zname == "") {
        this.$message.error("请输入执照名称");
      } else if (this.form3.fname == "") {
        this.$message.error("请输入法人姓名");
      } else if (this.form3.fipo.length != "11") {
        this.$message.error("法人手机号错误");
      } else if (this.form3.imageUrl3 == "") {
        this.$message.error("请上传法人正面身份证");
      } else if (this.form3.imageUrl4 == "") {
        this.$message.error("请上传法人反面身份证");
      } else {
        // this.form3.fipo
        let data = {
          phone: this.form1.phone,
          code: this.form1.region,
          shopName: this.form2.name,
          province: this.form2.province,
          city: this.form2.city,
          area: this.form2.area,
          address: this.form2.xing,
          idcardBefore: this.form3.imageUrl,
          idcardAfter: this.form3.imageUrl1,
          name: this.form3.name,
          idcard: this.form3.cid,
          imgurl: this.form3.imageUrl2,
          industryType: this.form3.leibie,
          industryAttribute: this.form3.shuxing,
          num: this.form3.zhuche,
          licenseName: this.form3.zname,
          legalName: this.form3.fname,
          legalPhone: this.form3.fipo,
          legalIdcardBefore: this.form3.imageUrl3,
          legalIdcardAfter: this.form3.imageUrl4
        };
        let res = await this.$postRequest("/api/user/shopUser/register", data);
        this.$message.success("申请已提交，请耐心等待回复");
        this.$router.push({ name: "loginindex" });
      }
    },
    xieyi(num) {
      this.$postRequest("/api/cms/getTreaty", {
        status: num
      }).then(res => {
        num == 0
          ? (this.name = "《中铁用户协议》")
          : (this.name = "《隐私政策声明》");
        this.html = res.data.content;
        this.dialog = true;
      });
    }
  }
};
</script>
<style scoped lang="scss">
.con {
  width: 100%;
  margin: auto;
  /deep/ .el-form-item__label,
  /deep/ .el-input {
    font-size: 18px;
  }
  /deep/ .el-form-item__label {
    line-height: 50px;
  }
  /deep/ .el-input__inner {
    height: 50px;
    line-height: 50px;
  }
  /deep/ .el-select,
  /deep/ .el-cascader {
    width: 100%;
  }
  .yonghu {
    color: #1a69e0;
    cursor: pointer;
  }
  .title {
    height: 80px;
    background: #113f85;
    font-size: 32px;
    font-family: HYDaHeiJ;
    font-weight: 400;
    color: #ffffff;
    line-height: 80px;
    text-align: center;
  }
  .step {
    width: 1300px;
    height: 70px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 90px auto 120px;
    .step-item {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #b5b5b5;
    }
    .step-item > i {
      width: 33px;
      height: 33px;
      // margin-right: 20px;
      // vertical-align: -9px;
    }
    .step-item1 {
      color: #1a69e0;
    }
    .step-line {
      width: 200px;
      height: 1px;
      background: #b5b5b5;
      margin: 0 40px;
    }
    .step-line1 {
      background: #1a69e0;
    }
  }
  .form1 {
    width: 900px;
    margin: auto;
    .yan {
      text-align: right;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1a69e0;
      cursor: pointer;
    }
    /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #808080;
    }
    /deep/ .el-checkbox {
      color: #808080;
    }
  }
  .zhuche {
    width: 400px;
    height: 50px;
    background: #1a69e0;
    border-radius: 2px;
    margin: 110px auto;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
  }
  .form3 {
    .name {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #b5b5b5;
      text-align: center;
    }
    .yaoqiu {
      display: flex;
      align-items: center;
      height: 18px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #808080;
      img {
        width: 18px;
        height: 18px;
        margin-right: 8px;
      }
    }
    /deep/ .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    /deep/ .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    /deep/ .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 300px;
      height: 200px;
      line-height: 200px;
      text-align: center;
    }
    /deep/ .avatar {
      width: 300px;
      height: 200px;
      display: block;
    }
  }
  /deep/ .el-dialog__body {
    padding-top: 0px;
  }
  .dialog {
    height: 500px;
    overflow: auto;
  }
}
</style>